<template>
	<view style="width: 100%;display: flex;">
		<view class="left">
			<manage></manage>
		</view>
		<view style="width: 90%;">
			<uni-search-bar placeholder="搜索订单编号" bgColor="#EEEEEE" @confirm="search" cancelButton="none" />
			<!-- :loading="true" -->
			<uni-table border stripe type="selection" emptyText="暂无更多数据" selection-change="multipleChoose">

				<uni-tr>
					<uni-th align="center" width="60">序号</uni-th>
					<uni-th align="center">商品编号</uni-th>
					<uni-th align="center">系列编号</uni-th>
					<uni-th align="center">商品名称</uni-th>
					<uni-th align="center">商品图片</uni-th>
					<uni-th align="center">操作</uni-th>
					<uni-th align="center"></uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in goods" :key="index">
					<uni-td align="center">{{index}}</uni-td>
					<uni-td align="center">{{item.googId}}</uni-td>
					<uni-td align="center">{{item.seriesId}}</uni-td>
					<uni-td align="center">{{item.googname}}</uni-td>
					<uni-td align="center">
						<image :src="item.goodurl" style="width: 80px; height: 80px;"></image>
					</uni-td>
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="edit(index)">修改</button>
							<button class="uni-button" size="mini" type="warn" @click="del(index)">删除</button>
						</view>
					</uni-td>
				</uni-tr>
				<!-- 		 <uni-tr v-for="(item, index) in uers" :key="index">
						<uni-td align="center">
							<checkbox></checkbox>
						</uni-td>
						<uni-td>{{t}}</uni-td>
				</uni-tr> -->
			</uni-table>
			<view>
				<uni-row>
					<uni-col :span="3" class="grid">
						<button type="primary" icon="uni-icon-circle-plus-outline" size="mini"
							@click="inputDialogToggle" class="uni-button" width="30px">新增
						</button>
					</uni-col>
					<uni-col :span="3" class="grid">
						<button type="warn" icon="uni-icon-delete" size="mini" @click="delSelect" class="uni-button"
							width="30px">删除

						</button>
					</uni-col>
				</uni-row>
			</view>
			<br />
			<!-- <uni-pagination :total="50" title="标题文字" /> -->
			<!--分页条-->
			<uni-pagination background layout="prev, pager, next" :total="page.totalRecords" pageSize="10"
				@current-change="currentChange()">
			</uni-pagination>
			<view>
				<!-- 输入框示例 -->
				<uni-popup ref="inputDialog" type="dialog">
					<scroll-view scroll-y="true" class="scroll-Y">
						<uni-popup-dialog ref="inputClose" title="新增商品信息" @confirm="confirmaddcommodity"
							@close="closeaddcommodity">
							<uni-forms id="#addgoods" ref="#addgoods" :modelValue="addgoods" labelWidth="80px">
								<uni-forms-item label="商品编号:" prop="googId" leftIcon="plusempty">
									<uni-easyinput v-model="addgoods.googId"></uni-easyinput>
								</uni-forms-item>
								<uni-forms-item label="系列编号:" leftIcon="plusempty">
									<picker @change="sizePicker" :value="serisesIndex" :range="serises">
										<view class="textureCss">{{serises[serisesIndex]}}</view>
									</picker>
								</uni-forms-item>
								<uni-forms-item label="商品名称:" prop="googname" leftIcon="plusempty">
									<uni-easyinput v-model="addgoods.googname"></uni-easyinput>
								</uni-forms-item>
								<uni-forms-item label="商品图片:" prop="goodurl" leftIcon="plusempty">
									<uni-easyinput v-model="addgoods.goodurl" placeholder="请插入商品图片" :disabled="true">
									</uni-easyinput>
									<button @click="select" type="default">上传</button><br>
								</uni-forms-item>
							</uni-forms>
						</uni-popup-dialog>
					</scroll-view>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="eduDialog" type="dialog">
					<scroll-view scroll-y="true" class="scroll-Y">
					<uni-popup-dialog ref="inputClose" title="修改商品信息" @confirm="confirmeducommodity"
						@close="closeeducommodity">
						<uni-forms id="#edigoods" ref="#edigoods" :modelValue="edigoods" labelWidth="80px">
							<uni-forms-item label="商品编号:" prop="googId" leftIcon="plusempty">
								<uni-easyinput v-model="edigoods.googId"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="系列编号:" leftIcon="plusempty">
								<picker @change="seriesPicker" :value="serisesIndex" :range="serises">
									<view class="textureCss">{{serises[serisesIndex]}}</view>
								</picker>
							</uni-forms-item>
							<uni-forms-item label="商品名称:" prop="googname" leftIcon="plusempty">
								<uni-easyinput v-model="edigoods.googname"></uni-easyinput>
							</uni-forms-item>
							<uni-forms-item label="商品图片:" prop="goodurl" leftIcon="plusempty">
								<uni-easyinput v-model="edigoods.goodurl" placeholder="请插入商品图片" :disabled="true">
								</uni-easyinput>
								<button @click="select" type="default">上传</button><br>
							</uni-forms-item>
						</uni-forms>
					</uni-popup-dialog>
					</scroll-view>
				</uni-popup>
			</view>
			<view>
				<uni-popup ref="delDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" title="删除图片" @confirm="confirmdelcommodity"
						@close="closecommodity">
						<text>确定要删除编号为{{goods[goodsIndex].googId}}的商品信息吗？</text>
					</uni-popup-dialog>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import manage from "@/components/manage/manage.vue";
	export default {
		components: {
			manage,
		},
		data() {
			return {
				goodsIndex: 0,
				intxt: '',
				goods: [],
				addgoods: {
					googId: '',
					seriesId: '',
					googname: '',
					goodurl: ''
				},
				edigoods: {
					googId: '',
					seriesId: '',
					googname: '',
					goodurl: ''
				},
				addgForm: {
					orderId: '',
					imgurl: ''
				},
				editgForm: {
					orderId: '',
					imgurl: '',
				},
				textures: ['塑料', '铁质'],
				textureIndex: 0,
				serisesData: [],
				serises: [],
				serisesIndex: 0,
				page: {
					pageSize: 10, //每页条数,  默认10条
					totalRecords: 0, //总条数
					totalPages: 0, //总页数
					pageNum: 0,
				},
				current: 0,
				lengindxt: 0,
			}
		},

		mounted() {


		},
		methods: {
			seriesPicker(e) {
				this.serisesIndex = e.detail.value

				this.addgoods.seriesId = this.serises[this.serisesIndex]

			},

			selectintxy(name) {

			},
			texturePicker(e) {
				this.textureIndex = e.detail.value
				let nuber = this.textureIndex
				console.log(nuber)
				this.addgoods.textures = this.textures[nuber]
				console.log(this.addgoods.textures)
				console.log(e.detail.value)
			},
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			},
			select() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						// 设置url的值，显示控件
						this.addgForm.imgurl = rst.tempFilePaths[0];
					}
				});
			},
			// // 每页显示多少条数据
			sizeChange(val) {
				this.page.pageSize = val.pageSize;
			},
			//翻页
			currentChange(val) {
				this.page.pageNum = val.current;
			},
			inputDialogToggle() {
				this.$refs.inputDialog.open()
			},
			edit(index) {
				this.edigoods = this.goods[index]
				this.$refs.eduDialog.open()
			},
			getcommodity() {
				uni.request({
					url: this.api.commodity,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.lengindxt = res.data.length
					console.log(this.lengindxt)
					this.goods = res.data
					console.log(res.data)
					this.page.totalRecords = this.lengindxt;
					this.page.totalPages = this.page.totalRecords / this.page.pageSize + 1;
				})
			},
			getseriesData() {
				uni.request({
					url: this.api.Getseries,
					method: "GET",
				}).then(data => {
					let [err, res] = data
					this.serisesData = res.data
					console.log(this.serisesData)
					for (let i = 0; i < this.serisesData.length; i++) {
						this.serises[i] = this.serisesData[i].seriesId
					}
					console.log(this.serises)
				})
			},
			del(e) {
				this.goodsIndex = e;
				this.$refs.delDialog.open()
			},
			confirmaddcommodity() {
				uni.request({
					url:this.api.postcommodity,
					method:"POST",
					data:this.addgoods,
					success: (res) => {
						if(res.data){
							uni.showToast({
								title:'添加商品信息成功',
								duration:2000
							})
							this.addgForm.orderId=this.addgoods.googId
							this.addgForm.imgurl=this.addgoods.goodurl
							
						}
						else{
							uni.showToast({
								title:'添加商品信息失败',
								icon:"error"
							})
						}
					}
				})
			},
			closeaddcommodity(){
				uni.showToast({
					title:'添加商品信息失败',
					icon:"error"
				})
			},
			confirmeducommodity(){
				uni.request({
					url:this.educommodity,
					method:"PUT",
					data:this.edigoods,
					success: res => {
						if(res.data){
							uni.showToast({
								title:'修改商品信息成功',
								duration:2000
							})
						}
						else{
							uni.showToast({
								title:'修改商品信息失败',
								icon:"error"
							})
						}
					},
					fail: (res) => {
						uni.showToast({
							title:'修改商品信息失败',
							icon:"error"
						})
					}
				})
			},
			closeeducommodity(){
				uni.showToast({
					title:'取消修改商品信息',
					icon:"none"
				}),
				this.getcommodity()
			},
			confirmdelcommodity(){
				uni.request({
					url:this.api.delcommodity+this.goods[this.goodsIndex].googId,
					method:"DELETE",
					success: (res) => {
						if(res.data){
							uni.showToast({
								title:'删除商品信息成功',
								duration:2000
							})
						}
						else{
							uni.showToast({
								title:'删除商品信息失败',
								icon:'error'
							})
						}
					}
				})
			},
			closecommodity(){
				uni.showToast({
					title:'取消删除商品信息',
					icon:'error'
				})
			},
			confirmaddpice(){
				uni.request({
					url:this.api.Pustpicture,
					method:"POST",
					data:this.addgForm,
					success: (res) => {
					if(res.data){
						uni.showToast({
							title:'添加成功',
							duration:3000
						})
					}
					else{
						uni.showToast({
							title:'添加失败',
							icon:"error"
						})
					}
			},
			fail: () => {
			uni.showToast({
				title:'添加失败',
				icon:"error"
			})	
			}
				})
			}
		},
		onLoad() {
			// this.utilList.faToast()
			this.getcommodity();
			this.getseriesData();
		},
	}
</script>

<style scoped>
	.uni-group {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.left {
		border: 1px solid;
		background-color: #c5c5c5;
		height: 100%;
		width: 10 %;
	}

	.rec {
		float: left;
		width: 75%;
		/* height: 100%; */

	}


	input {
		border: 1px solid;
		border-radius: 18px;
	}

	uni-button {
		font-size: 7px;
		border-radius: 18px;
	}

	.table {
		width: 100%;
		border: 1px solid;
		text-align: center;
	}

	.uni-th {
		/* border: #000000 1px solid; */
		/* background-color: #c5c5c5; */
	}

	uni-td {
		align-items: center;
	}

	.button-edu {
		background-color: #18BC37;
	}

	.button-del {
		background-color: #c00000;
	}

	.scroll-Y {
		height: 600px+;
	}
	.textureCss {
			width: auto;
			height: 40px;
			border: 1px solid #e5e5e5;
			border-radius: 4px;
			text-align: center;
			line-height: 40px;
		}
</style>